<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="遇见与成长 - 图腾客户管理系统 - 客户列表">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <link rel="stylesheet" href="/apps/css/mui.css">
</head>
<body>
    <header class="d-flex align-items-center bg-custom-color p-3">
        <button id="backButton" class="btn btn-primary rounded-circle me-3" style="background-color: white;" onclick="history.back();">
            <i class="fas fa-arrow-left custom-color"></i>
        </button>
        <span class="title-text text-white fs-5">
            {{excerpt}}
            {{{download}}}
        </span>
    </header>
    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <p>{{{description}}}</p>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    {{#each fields}}
                                    <th scope="col" class="cell-content">{{this}}</th>
                                    {{/each}}
                                </tr>
                            </thead>
                            <tbody>
                                {{#each rows}}
                                <tr data-id="{{this.cid}}" onclick="showDataModal('{{this.cid}}');">
                                    {{#each this}}
                                    <td class="cell-content">{{this}}</td>
                                    {{/each}}
                                </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <nav aria-label="Page navigation" class="pagination-container">
            <button id="homeButton" class="btn btn-primary position-absolute top-0 start-0 m-3 rounded-circle" style="width: 50px; height: 50px; padding: 0;" onclick="window.location.href='https://totemlife.cn/apps/crm/';">
                <i class="fas fa-home" style="color:white;"></i>
            </button>
            <button id="formButton" class="btn btn-primary position-absolute top-0 end-0 m-3 rounded-circle" style="width: 50px; height: 50px; padding: 0;" onclick="showQueryForm();">
                <i class="fas fa-search" style="color: white;"></i>
            </button>
            <ul class="pagination">
                {{{paginator}}}
            </ul>
        </nav>
    </div>
    <footer class="footer" style="text-align: center;">
        <div class="row">
            <div class="text-muted">&nbsp;</div>
            <div class="text-muted">&nbsp;</div>
            <div class="text-muted">&copy;2023 图腾生命医学</div>
            <div class="text-muted">我们为人类免疫事业而奉献</div>
        </div>
    </footer>
    <div class="modal fade" id="menuModal" tabindex="-1" aria-labelledby="menuModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="menuModalTitle">选择应用操作</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="menuModalBody" style="text-align:center;">
                    <a style="text-decoration: none;" href="https://totemlife.cn/apps/crm/"><h5>ENG应用首页</h5></a>
                    <hr>
                    <a style="text-decoration: none;" href="#" id ="queryClients" onclick="showQueryForm();"><h5>筛选搜索客户</h5></a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="clientModal" tabindex="-1" aria-labelledby="clientModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="clientModalTitle">选择数据操作</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="clientModalBody" style="text-align:center;">
                </div>
                <div class="modal-footer" id="clientModalFooter">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭操作窗口</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="queryModal" tabindex="-1" aria-labelledby="queryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="queryModalLabel">设置查询条件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="queryForm" onsubmit="submitQueryForm()">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label for="begin" class="form-label">创建日期起始</label>
                                    <input type="date" class="form-control" id="begin" name="begin" value="{{begin}}">
                                </div>
                            </div>
                            <div class="col">
                                <div class="mb-3">
                                    <label for="end" class="form-label">创建日期截至</label>
                                    <input type="date" class="form-control" id="end" name="end" value="{{end}}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label for="cid" class="form-label">客户CID</label>
                                    <input type="text" class="form-control" id="cid" name="cid" value="{{cid}}">
                                </div>
                            </div>
                            <div class="col">
                                <div class="mb-3">
                                    <label for="cname" class="form-label">客户姓名</label>
                                    <input type="text" class="form-control" id="cname" name="cname" value="{{cname}}">
                                </div>
                            </div>
                            <div class="col">
                                <div class="mb-3">
                                    <label for="rep" class="form-label">代表代码</label>
                                    <input type="text" class="form-control" id="rep" name="rep" value="{{rep}}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" id="clientModalFooter">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭查询</button>
                            <button type="submit" class="btn btn-primary">查询数据</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script src="/apps/js/wx-client-dom.js"></script>
    <script>
        function goToHomePage() {
                window.location.href = "/apps/crm/";
        }
        function showMenuModal() {
            const modal = new bootstrap.Modal(document.getElementById('menuModal'));
            modal.show();
        };
        function showDataModal(id) {
            const selectedDataId = id;
            const modal = new bootstrap.Modal(document.getElementById('clientModal'));
            const modalTitle = document.getElementById('clientModalTitle');
            modalTitle.textContent = `#${selectedDataId}的操作`;
            const modalBody = document.getElementById('clientModalBody');
            modalBody.innerHTML = `
                <a style="text-decoration: none;" href="https://totemlife.cn/apps/crm/materials?cid=${selectedDataId}&tag=推广物料"><h5>下载推广物料</h5></a>
                <hr>
                <a style="text-decoration: none;" href="https://totemlife.cn/apps/crm/referrals?cid=${selectedDataId}"><h5>查看推荐数据</h5></a>
            `;
            modal.show();
        };
        function showQueryForm() {
            const modal = new bootstrap.Modal(document.getElementById('queryModal'));
            modal.show();
        };
        function submitQueryForm() {
            event.preventDefault();
            const queryParams = new URLSearchParams();
            const paramsToCheck = ['begin', 'end', 'cid', 'cname', 'rep'];
            for (const param of paramsToCheck) {
                const value = document.getElementById(param).value;
                if (value && value !== '') queryParams.append(param, value);
            }
            const url = `https://totemlife.cn/apps/crm/clients?${queryParams.toString()}`;
            window.location.href = url;
        };
    </script>
</body>
</html>
